<template>
  <div>
    <van-nav-bar title="我的收藏" left-arrow @click-left="onClickLeft" />
    <div class="content">
      <van-swipe-cell
        :right-width="item.isStick?'148px':'120px'"
        v-for="(item,index) in list"
        :key="index"
      >
        <van-cell default :to="`/detail/${item.id}`">
          {{item.title}}
          <van-tag v-if="item.isStick" round type="danger">置顶</van-tag>
        </van-cell>
        <template #right>
          <van-button square @click="deleteCollect(item.id)" type="danger" text="删除" />
          <van-button
            square
            @click="setStickFun(item.isStick,item.id)"
            type="primary"
            :text="item.isStick?'取消置顶':'置顶'"
          />
        </template>
      </van-swipe-cell>
    </div>
  </div>
</template>

<script>
import { delZXCO, getZXCO, setStick, getStick, delStick } from '../utils/storage'
import { mapActions } from 'vuex'
export default {
  name: 'collect',
  data() {
    return {
      stick: []
    }
  },
  computed: {
    list() {
      let stickArr = getStick()
      this.$store.state.collect.list.forEach((val, ind) => {
        if (stickArr.includes(val.id)) {
          val.isStick = true
        }
        if (val.isStick) {
          this.$store.state.collect.list.splice(ind, 1)
          this.$store.state.collect.list.unshift({ ...val })
        }
      })
      return this.$store.state.collect.list
    }
  },
  methods: {
    ...mapActions('collect', ['getListFn']),
    onClickLeft() {
      this.$router.back()
    },
    deleteCollect(id) {
      let collectArr = getZXCO()
      let nm = collectArr.indexOf(id + '')
      delZXCO(nm)
      this.getListFn()
    },
    setStickFun(isStick, id) {
      if (isStick) {
        let stickArr = getStick()
        let nm = stickArr.indexOf(id)
        delStick(nm)
      } else {
        setStick(id)
      }
      this.getListFn()
    }
  },
  mounted() {
    this.getListFn()
  }
}
</script>

<style scoped>
.content {
  position: absolute;
  top: 46px;
  bottom: 0px;
  overflow-y: auto;
  width: 100%;
}
.collect {
  width: 100%;
  padding: 10px 16px;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  border: 0px;
}
</style>